<template>
    <el-container class="home_container">
        <el-header> 
            <div style="width:5%;">
               <img src="../assets/img/logo1.png" alt="">
            </div>
            <i class="iconfont icon-sanhengxian"></i>
            <div style="width:80%;margin-left:20px;">
                <el-menu 
                default-active="1" 
                class="el-menu-demo"
                mode="horizontal" 
                @select="handleSelect" 
                text-color="#666666"
                active-text-color="#1890FF"
                active-background-color="#f5f8fa"
                >
                    <el-menu-item index="1"><i class="iconfont icon-jiangbei icon-m"></i>赛事管理</el-menu-item>
                    <el-menu-item index="2"><i class="iconfont icon-zhengjianshenfenzheng icon-m"></i>账号管理</el-menu-item>
                    <el-menu-item index="3"><i class="iconfont icon-yinle icon-m"></i>音乐管理</el-menu-item>
                    <el-menu-item index="4"><i class="iconfont icon-pingmugongxiang icon-m"></i>大屏管理</el-menu-item>
                    <el-menu-item index="5"><i class="iconfont icon-shouji icon-m"></i>设备管理</el-menu-item>
                    <el-menu-item index="6"><i class="iconfont icon-jiangpairenzhengzhongyaoxianxing icon-m"></i>奖项管理</el-menu-item>
                </el-menu>
            </div>
            <div class="header_icon_right">
                <ul>
                    <li><i class="iconfont icon-mima"></i></li>
                    <li><i class="iconfont icon-yifu icon_right"></i></li>
                    <li><i class="iconfont icon-chilun icon_right"></i></li>
                    <li><i class="iconfont icon-lingdang icon_right"></i></li>
                    
                </ul>
                  
            </div>
            <div class="header_top_img_box">
                <div class="header_top_img">
                    <img src="../assets/img/header.jpg" alt="">
                </div>
               <span>星宇会长</span>
            </div>
        </el-header>
        <el-container>
            <!-- <el-aside width="200px">Aside</el-aside> -->
            <el-main>
                <el-row>
                    <el-col :span="6">1</el-col>
                    <el-col :span="6">2</el-col>
                    <el-col :span="6">3</el-col>
                    <el-col :span="6">4</el-col>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
        <!-- <el-button type='info' @click="logout">退出</el-button> -->

    
</template>
<script>
export default {
    methods:{
        logout(){
            //清空缓存
            window.sessionStorage.clear();
            this.$router.push('/Login');
        }
    }
}
</script>
<style scoped>
.el-header{
    /* border: 1px solid red; */
    background: #fff;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    width: 100%;
}
.el-aside{
    background: #333744;
}
.el-main{
    background: #eaedf1;
}
.home_container{
    height: 100%;
}
.icon-sanhengxian{
    font-size:30px; 
    margin-left:60px;
}
.el-menu-item.is-active {
   background-color:#f5f8fa !important;
   border-bottom: 2px solid#f5f8fa !important;
}
.icon-m{
    margin-right: 12px;
}
.icon-zhengjianshenfenzheng{
    font-size: 22px;
}
.icon-yinle{
    font-size: 22px;
}
.icon-pingmugongxiang{
    font-size: 22px;
}
.icon-shouji{
    font-size: 22px;
}
.icon-jiangpairenzhengzhongyaoxianxing{
    font-size: 22px;
}
.el-menu-item {
    font-size: 15px !important;
    width: 120px;
    padding: 0 3px !important;
}
.icon-mima{
    font-size: 20px;
}
.icon_right{
    font-size: 24px;
    color: #333333;
}
.header_icon_right ul li{
    list-style: none;
    display:inline;
    /* border: 1px solid red; */
    padding: 0 15px;
    text-align: center;
}
.header_top_img{
    width: 34px;
    height: 34px;
    border-radius:17px;
    overflow: hidden;
}
.header_top_img img{
    width: 100%;
    height: 100%;
}
.header_icon_right{
    width: 25%;
    text-align: center;
    margin-right: 8px;
}
.header_top_img_box{
    display:flex;
    /* justify-content: flex-end; */
    width: 13%;
    /* margin-left:10px; */
   /* border: 1px solid red; */
}
.header_top_img_box span{
    line-height: 40px;
    font-size: 14px;
    margin-left: 10px;
}
</style>


